<template>
  <div class="app-container">
    <div class="app-title">
      <span>生成银行数据</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-col :span="1">
          <i
            :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']"
            @click="toggerTree"
          />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-52px "
          >
            <el-radio-button
              label="0"
              name="noGenerate"
            >未导出</el-radio-button>
            <el-radio-button
              label="2"
              name="isGenerate"
            >已导出</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col
          style="text-align:right;margin-top: -3px;"
          :span="18"
        >
          <el-select
            v-model="salaCardBank"
            clearable
            class="filter-item"
            placeholder="--请选择--"
            @change="query"
          >
            <el-option
              v-for="item in agencyBankLists"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
          <el-button
            v-if="activeName === '0'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;width:150px"
            type="primary"
            :loading="generateBtnLoading"
            @click="generateAndExportBankData"
          >
            生成并导出银行数据
          </el-button>
          <el-button
            v-if="activeName !== '0'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;width:110px"
            type="primary"
            :loading="regenerateLoading"
            @click="regenerate"
          >
            撤销生成
          </el-button>
        </el-col>
      </div>
    </el-row>
    <div>
      <div style="margin-left:166px; position:absolute; margin-top:-45px">
        <img style="width:16px; height:16px;" :src="Untreatedimg">
      </div>
      <div style="margin-left:76px; position:absolute; margin-top:-45px">
        <img style="width:16px; height:16px;" :src="Processedimg">
      </div>
    </div>
    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid':'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{'height' : treeHeight + 'px'}">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏" />
      <div class="mid" :class="[isActive ? 'mids': 'min']">
        <generateBankDataNoSftpChildren
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          @handleGenerateBtnLoading="handleGenerateBtnLoading"
          @revokeGenerateSuccess="revokeGenerateSuccess"
        />
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import generateBankDataNoSftpChildren from './children/generateBankDataNoSftpChildren'
import { getAgencyBank } from '@/api/baseInfo'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'GenerateBankDataNoSftp',
  components: { generateBankDataNoSftpChildren, AgencyTree, Drag },
  data() {
    return {
      salaCardBank: '',
      agencyBankLists: [], // 银行
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      timer: '',
      exportLoading: false,
      activeName: '0',
      Untreatedimg: require('@/assets/images/processed.png'),
      Processedimg: require('@/assets/images/select.png'),
      uploadBtnLoading: false,
      regenerateBtnLoading: false,
      generateBtnLoading: false,
      regenerateLoading: false
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.Processedimg = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
      } else {
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
      }
    }
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  created() {
    this.initBaseInfo()
  },
  methods: {
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    // 树方法
    handleTreeQuery(data) {
      this.$refs.chil.handleTree(data)
    },
    // 生成银行数据
    generateAndExportBankData() {
      this.generateBtnLoading = true
      this.$refs.chil.generateAndExportBankData()
    },
    //撤销生成
     regenerate() {
       this.regenerateLoading = true
      this.$refs.chil.regenerate()
    },
    
    handleGenerateBtnLoading() {
      console.log('over')
      this.generateBtnLoading = false
    },
    revokeGenerateSuccess(){
    this.regenerateLoading = false
    },
    // 获取银行基础数据
    initBaseInfo() {
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    },
    // 查询
    query() {
      this.$refs.chil.query(this.salaCardBank)
    }
  }

}
</script>

<style lang="scss" scoped>
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.app-container {
    height: auto;
}
</style>
